<!--
 * @description: 表格组件
 * @fileName: index.vue
!-->
<template>
  <div>
    <el-table :header-cell-style="{ height: meterHeight, backgroundColor: hBG }" v-loading="loading"
      :max-height="maxHeight" row-class-name="tableBody" header-row-class-name="tableHeader"
      :row-style="rowStyleFun" :data="tableData" style="width: 100%">
      <el-table-column show-overflow-tooltip v-for="(item, index) in tabColumns" :key="item.id" :label="item.title" :align="item.align"
        :min-width="item.width" :fixed="item.fixed">
        <template #header>
          <div v-if="item.isSort"
            :style="{ 'justify-content': item.align, 'padding': `0 ${item.pdr ? item.pdr : '8px'} 0 ${item.pdl ? item.pdl : 0}`, 'boxSizing': 'border-box' }"
            class="sort_style">
            <span>{{ item.title }}</span>
            <span>
              <i @click="sortChanges(item, index, 'asc')" class="el-icon-arrow-up"
                style="display:block;font-size: 10px;cursor: pointer;"
                :color="item.sortState == 'asc' ? '#409EFF' : ''"></i>
              <i @click="sortChanges(item, index, 'desc')" class="el-icon-arrow-down"
                style="display:block;font-size: 10px;cursor: pointer;"
                :color="item.sortState == 'desc' ? '#409EFF' : ''"></i>
            </span>
          </div>
          <div v-else
            :style="{ 'paddingLeft': item.pdl ? item.pdl : 0, 'paddingRight': item.pdr ? item.pdr : '8px', 'boxSizing': 'border-box' }">
            {{ item.title }}
          </div>
        </template>
        <template #default="scope">
          <div v-if="item.keyName == 'i'"
            :style="{ 'paddingLeft': item.pdl ? item.pdl : 0, 'paddingRight': item.pdr ? item.pdr : 0, 'boxSizing': 'border-box' }">
            {{ indexMethod(scope.$index) }}
          </div>
          <div v-else
            :style="{ 'paddingLeft': item.pdl ? item.pdl : 0, 'paddingRight': item.pdr ? item.pdr : '8px', 'boxSizing': 'border-box' }">

            <div v-if="item.slotName !== ''">
              <slot :name="item.slotName" :row="scope.row"></slot>
            </div>
            <!-- 溢出隐藏 -->
            <div v-else :style="{ paddingRight: item.isSort ? '15px' : '0', 'boxSizing': 'border-box' }">
              {{ scope.row[item.keyName] }}
            </div>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="pageStyle flex justify-center" v-if="pagination.total !== 0">
      <el-pagination style="--el-pagination-button-bg-color:#FFFFFF;--el-pagination-button-disabled-color:#FFFFFF;"
        layout="sizes, prev, pager, next, total" :total="pagination.total" @current-change="handleCurrentChange"
        :pager-count="pagination.pageCount" :page-sizes="pagination.pageSizes" @size-change="handleSizeChange"
        :current-page="currentPage" background :page-size="pagination.pageSize">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    columns: {
      type: Array,
      default: () => {
        return [
          {
            id: 0,
            title: "序号", // 标题名称
            isSort: false, // 是否展示排序按钮
            sortState: "",
            width: "68px",
            keyName: "i", // 数据的属性值
            align: "center",
            slotName: "", // 插槽名,为空字符串时不使用
          },
          {
            id: 1,
            title: "时间",
            isSort: false,
            sortState: "",
            width: "68px",
            keyName: "date",
            align: "center",
            slotName: "",
          },
          {
            id: 2,
            title: "姓名",
            isSort: false,
            sortState: "",
            width: "200px",
            keyName: "name",
            align: "center",
            slotName: "",
          },
          {
            id: 3,
            title: "地址",
            isSort: false,
            sortState: "",
            width: "auto",
            keyName: "address",
            align: "center",
            slotName: "",
          }
        ]
      }
    },
    tableData: {
      type: Array,
      default: () => {
        return [{
          date: '2016-05-03',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
        },
        {
          date: '2016-05-02',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
        },
        {
          date: '2016-05-04',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
        },
        {
          date: '2016-05-01',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
        }]
      }
    },
    tdHeight: {
      type: String,
      default: '45px'
    },
    meterHeight: {
      type: String,
      default: '45px'
    },
    maxHeight: {
      type: String,
      default: '450px'
    },
    pagination: {
      type: Object,
      default: () => {
        return {
          pageCount: 7, //总页数
          total: 0, //总条目数
          pageSize: 10,//当前页条数
        }
      }
    },
    loading: {
      type: Boolean,
      default: false
    },
    hBG: {
      type: String,
      default: '#F7F9FF'
    }
  },
  data() {
    return {
      tabColumns: this.columns,
      currentPage: 1,
    }
  },
  methods: {
    //asc 表示升序，desc 表示降序
    //[asc,desc]
    sortChanges(item, index, sort) {
      let list = this.tabColumns.value;
      list = [...this.tabColumns.value.map((items) => {
        items.sortState = '';
        return items
      })];
      list[index].sortState = sort;
      this.tabColumns = list;
      this.$emit('preSortChanges', item)
    },
    handleSizeChange(page) {
      this.$emit('preSizeChange', page)
    },
    //当前页
    handleCurrentChange(num) {
      this.$emit('preCurrentChange', num)
    },
    indexMethod(index) {
      let curpage = this.currentPage; //单前页码
      let limitpage = this.$props.pagination.pageSize; //每页条数
      return index + 1 + (curpage - 1) * limitpage;
    },
    //背景高亮判断
    rowStyleFun({row={}, rowIndex}){
      let bgObj={ height: this.tdHeight, padding: '0 0 0 0' }
      //合同到期提醒高亮<=60天
      if(row.hasOwnProperty('ifRed')&&row.ifRed){
        // return {...bgObj,backgroundColor:'#F56C6C'}
        return {...bgObj,backgroundColor:'#f8c6c6'}
      }else{
        return bgObj
      }

    }
  }
}
</script>
<style>
.tableHeader{
  font-size: 14px;
  line-height: 16px;
  color: #000;
}
</style>
<style scoped lang='scss'>
:root {
  --el-pagination-button-bg-color: #ffffff;
  --el-pagination-button-disabled-color: #ffffff;
}

::v-deep .number {
  box-shadow: 0px 0px 0px 0.5px #DCDCDC;
}



::v-deep .more {
  // box-shadow: 0px 0px 0px 0.5px #DCDCDC;
  border: 1px solid #DCDCDC;
}

::v-deep .el-table .cell {
  padding: 0;
}

/*解决图片预览被表格遮住问题 */
::v-deep .el-table .el-table__cell {
  padding: 0px 0px 0 0;
  box-sizing: border-box;
  position: static;
}

::v-deep .tableBody {
  font-size: 12px;

  color: #202124;
}

::v-deep .sort_style {
  display: flex;
  align-items: center;

  span {
    display: block;
  }

  span:nth-child(1) {
    margin-right: 5px;
  }

  img {
    cursor: pointer;
    height: auto;
    width: 12px;
  }
}

::v-deep .el-input__wrapper {
  box-shadow: 0px 0px 0px 0.5px #DCDCDC;
}

/*分页*/
.pageStyle {
  margin-top: 30px;
}

.pagination {
  margin: 0 auto;
}

/* 分页输入框样式 */
.jumperStyle {
  font-size: 14px;

  color: #202124;
  margin-left: 18px;

  input {
    border: 1px solid #DCDCDC;
    border-radius: 3px 3px 3px 3px;
    font-size: 14px;
    color: #202124;
    line-height: 30px;
    text-align: center;
    box-sizing: border-box;
  }
}

::v-deep .btn-prev.is-first {
  border: 1px solid #DCDCDC;
}

::v-deep .btn-next {
  border: 1px solid #DCDCDC;
}
</style>
